<template>
  <view class="class-container">
    <my-search></my-search>
    <view class="classify">
      <scroll-view class="left" scroll-y :style="{ height: height + 'px' }">
        <view class="left-title" @click="tabIndex = i" v-for="(v, i) in tab" :key="i"
          :class="i === tabIndex ? 'active':''">{{ v.cat_name }}</view>
      </scroll-view>
      <scroll-view class="right" scroll-y :style="{ height: height + 'px' }">
        <view class="right-item" v-for="(v, i) in tabChild" :key="i">
          <view class="right-title">
            {{v.cat_name}}
          </view>
          <view class="right-list">
            <view class="right-list-item" v-for="(v, i) in v.children" :key="i">
              <image src="/static/images/banner1.webp" mode="widthFix"></image>
              <text>{{ v.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import mixin from '../../mixins/index.js'
  export default {
    mixins: [mixin],
    onLoad() {
      this.getTab();
      
      const obj = uni.getWindowInfo();
      this.height = obj.windowHeight - 60
    },
    data() {
      return {
        tab: [],
        tabIndex: 0,
        height: 0
      };
    },
    computed: {
      // 二级数据
      tabChild() {
        if (this.tab.length === 0) {
          return []
        }
        return this.tab[this.tabIndex].children
      }
    },
    methods: {
      async getTab() {
        const [error, resp] = await uni.request({
          url: 'https://www.uinav.com/api/public/v1/categories'
        })
        // 一级数据
        this.tab = resp.data.message
      }
    }
  }
</script>

<style lang="scss">
  .classify {
    display: flex;

    .left {
      width: 140upx;
      border-right: 1upx solid #ccc;
      font-size: 26upx;
      padding-left: 10upx;
  

      .left-title {
        margin: 30upx 0;
        border-left: 4upx solid #fff;
        padding-left: 10upx;

        &.active {
          border-left: 4upx solid red;
          color: red;
        }
      }
    }

    .right {
      flex: 1;
     

      .right-item {
        border-bottom: 1px solid #ccc;

        .right-title {
          padding-left: 20upx;
          line-height: 120upx;
          font-size: 50upx;
          text-align: center;
          font-weight: bold;
        }

        .right-list {
          display: flex;
          flex-wrap: wrap;

          .right-list-item {
            width: 33.3%;
            padding: 10upx;
            box-sizing: border-box;

            image {
              width: 100%;
            }

            text {}
          }
        }
      }
    }
  }
</style>
